import { defineComponent, ref } from 'vue'
import './index.less'
import { Descriptions } from 'ant-design-vue'
import PropTypes from '@/utils/PropTypes'
export default defineComponent({
  name: 'DescriptionsCom',
  props: {
    title: PropTypes.string().def(''),
    data: PropTypes.array().def([]),
    column: PropTypes.number().def(1),
    span: PropTypes.number().def(1),
    bordered: PropTypes.bool().def(false),
    layout: PropTypes.strOption<'horizontal' | 'vertical'>().def('horizontal'),
  },
  setup(props, { slots }) {
    return () => (
      <div class="descriptionsCom">
        <Descriptions
          column={props.column}
          layout={props.layout}
          bordered={props.bordered}
          v-slots={{
            title: () => (props.title ? props.title : slots.titles?.()),
          }}
        >
          {props.data.map((item: any) => {
            return (
              <Descriptions.Item label={item.label} span={props.span}>
                {item.value}
              </Descriptions.Item>
            )
          })}
        </Descriptions>
        {slots.content?.()}
      </div>
    )
  },
})
